<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css"
	th:href="@{/webjars/bootstrap/3.4.0/css/bootstrap.min.css}" />
	<link rel="stylesheet" href="../../static/css/common.css">
<title>Registration</title>
</head>
<!--<body style="background: #f1f1ff">-->
<body style="background-image: url('../../static/img/background.png');background-size: 100%, 100%;">
	<nav style="background: #0056ff;border-color:white" class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<a class="navbar-brand" style="color: #f0f0f0" href="#" th:href="@{/login}">登录</a>
			</div>
		</div>
	</nav>

	<div class="container" style="width:50%;margin-top:100px;padding-top:20px;padding-left: 50px;border-radius: 20px;background:white;border: 1px solid #cbcbcb;">
		<div class="row">
			<div th:if="${param.success}">
				<div class="alert alert-info">You've successfully registered
					to our awesome app!</div>
			</div>
			<h1 class="t">注册</h1>
			<div class="col-md-6 col-md-offset-3">
				<form th:action="@{/registration}" th:object="${user}" method="post">
					<p class="error-message" th:if="${#fields.hasGlobalErrors()}"
						th:each="error : ${#fields.errors('global')}" th:text="${error}">Validation
						error</p>

					<div class="form-group"
						th:classappend="${#fields.hasErrors('userName')}? 'has-error':''">
						<label for="userName" class="control-label">用户名</label> <input
							id="userName" class="form-control" th:field="*{userName}" required/>
						<p class="error-message"
							th:each="error: ${#fields.errors('userName')}"
							th:text="${error}">Validation error</p>
					</div>
					<div class="form-group"
						th:classappend="${#fields.hasErrors('realName')}? 'has-error':''">
						<label for="realName" class="control-label">真实姓名</label> <input
							id="realName" class="form-control" th:field="*{realName}" required/>
						<p class="error-message"
							th:each="error : ${#fields.errors('realName')}"
							th:text="${error}">Validation error</p>
					</div>
					<div class="form-group"
						th:classappend="${#fields.hasErrors('email')}? 'has-error':''">
						<label for="email" class="control-label">电子邮箱</label> <input
							id="email" class="form-control" th:field="*{email}" required/>
						<p class="error-message"
							th:each="error : ${#fields.errors('email')}" th:text="${error}">Validation
							error</p>
					</div>
					<div class="form-group"
						 th:classappend="${#fields.hasErrors('phone')}? 'has-error':''">
						<label for="phone" class="control-label">手机号码</label> <input
							id="phone" class="form-control" th:field="*{phone}" required/>
						<p class="error-message"
						   th:each="error : ${#fields.errors('phone')}" th:text="${error}">Validation
							error</p>
					</div>
					<div class="form-group"
						th:classappend="${#fields.hasErrors('roleId')}? 'has-error':''">
						<label for="roleId" class="control-label">角色</label>
						<select id="roleId" name="roleId" class="form-control">
							<option value="">请选择</option>
							<option value="2">货主</option>
							<option value="3">承运商</option>
						</select>
						<p class="error-message"
							th:each="error : ${#fields.errors('roleId')}"
							th:text="${error}">Validation error</p>
					</div>
					<div class="form-group"
						th:classappend="${#fields.hasErrors('password')}? 'has-error':''">
						<label for="password" class="control-label">密码</label> <input
							id="password" class="form-control" type="password"
							th:field="*{password}" required/>
						<p class="error-message"
							th:each="error : ${#fields.errors('password')}"
							th:text="${error}">Validation error</p>
					</div>
					<div class="form-group"
						th:classappend="${#fields.hasErrors('confirmPassword')}? 'has-error':''">
						<label for="confirmPassword" class="control-label">确认密码</label> <input id="confirmPassword" class="form-control"
							type="password" th:field="*{confirmPassword}" required/>
						<p class="error-message"
							th:each="error : ${#fields.errors('confirmPassword')}"
							th:text="${error}">Validation error</p>
					</div>
					<div class="form-group">
						<button type="submit" class="btn btn-success">Register</button>
						<span>Already registered? <a th:href="@{/login}">Login
								here</a></span>
					</div>

				</form>
			</div>
		</div>
	</div>

	<script type="text/javascript"
		th:src="@{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
	<script type="text/javascript"
		th:src="@{/webjars/bootstrap/3.4.0/js/bootstrap.min.js}"></script>
</body>
</html>